<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="__PUBLIC__/img/favicon.png">

    <title>南牧物联网云平台</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/css/bootstrap.css" rel="stylesheet">
    <link href="__PUBLIC__/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="__PUBLIC__/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
	<link href="__PUBLIC__/assets/morris.js-0.4.3/morris.css" rel="stylesheet" />
    <link href="__PUBLIC__/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="__PUBLIC__/css/owl.carousel.css" type="text/css">

      <!--right slidebar-->
      <link href="__PUBLIC__/css/slidebars.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="__PUBLIC__/css/style.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style-responsive.css" rel="stylesheet" />
  </head>

  <body>


			  <div class="row">
				  <div class="col-lg-12 col-md-12">
					  <section class="panel" >
						  <header class="panel-heading tab-bg-dark-navy-blue " >
                              <ul class="nav nav-tabs">
                                  <li class="active" >
                                      <a data-toggle="tab" href="#tab1">环境控制</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#tab2">料线饲喂</a>
                                  </li>
                                  <li class="">
                                      <a data-toggle="tab" href="#tab3">母猪饲喂</a>
                                  </li>
                              </ul>
                          </header>
						  
						  <div class="panel-body" >
							  <div class="tab-content">
							  
								  <div id="tab1" class="tab-pane active" >
								      <div class="row">
										  <div class="col-lg-12">
											  <section class="panel">
												  <header class="panel-heading">
													  
														<span class="pull-right">
														  <button type="button" id="loading-btn" class="btn  btn-xs"><i class="fa fa-filter"></i> 过滤条件1</button>
														  <button type="button" id="loading-btn" class="btn  btn-xs"><i class="fa fa-filter"></i> 排序条件1</button>
														  <!-- <a href="#" class=" btn btn-primary btn-xs"> 创建提醒</a> -->
														  <!-- <button type="button" id="loading-btn" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> 创建提醒</button> -->
													  </span>
												  </header>
												  
												  <div class="panel-body">
													  <div class="row">

														  <div class="col-lg-6 col-md-12">
															  <div class="input-group"><input type="text" placeholder="Search Here" class="input-sm form-control"> <span class="input-group-btn">
															  <button type="button" class="btn btn-sm btn-info"> 搜索!</button> </span></div>
														  </div>
													  </div>
												  </div>
												  
												  <div class="mybar">
													  <table  class="table table-hover p-table">
														  <thead>
														  <tr>
															  <th><span> 栏舍名称</span></th>
															  <th><span> 设备名称</span></th>
															  <th><span> 室内温度℃</span></th>
															  <th><span> 实际湿度%</span></th>
															  <th><span> 光照度lx</span></th>
															  <th><span> 氨气ppm</span></th>
															  <th><span> 变频风机开启比例</span></th>
															  <th><span> 设备状态</span></th>
														  </tr>
														  </thead>
														  <tbody id="id-table-nm820">
														  </tbody>
													  </table>
												  </div>
											  </section>
										  </div>
									  </div>
								  </div>
								  
								  <div id="tab2" class="tab-pane">
									  <div class="row">
										  <div class="col-lg-12">
											  <section class="panel">
												  <header class="panel-heading">
													  
														<span class="pull-right">
														  <button type="button" id="loading-btn" class="btn  btn-xs"><i class="fa fa-filter"></i> 过滤条件1</button>
														  <button type="button" id="loading-btn" class="btn  btn-xs"><i class="fa fa-filter"></i> 排序条件1</button>
														  <!-- <a href="#" class=" btn btn-primary btn-xs"> 创建提醒</a> -->
														  <!-- <button type="button" id="loading-btn" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> 创建提醒</button> -->
													  </span>
												  </header>
												  
												  <div class="panel-body">
													  <div class="row">

														  <div class="col-lg-6 col-md-12">
															  <div class="input-group"><input type="text" placeholder="Search Here" class="input-sm form-control"> <span class="input-group-btn">
															  <button type="button" class="btn btn-sm btn-info"> 搜索!</button> </span></div>
														  </div>
													  </div>
												  </div>
												  
												  <div class="mybar">
													  <table  class="table  table-advance table-hover">
														  <thead>
														  <tr>
															  <th><span> 栏舍</span></th>
															  <th><span> 设备</span></th>
															  <th><span> 送料状态</span></th>
															  <th><span> 送料模式</span></th>
															  <th><span> 下次送料</span></th>
															  <th><span> 下料状态</span></th>
															  <th><span> 下料模式</span></th>
															  <th><span> 下次下料</span></th>
															  <th><span></span></th>
														  </tr>
														  </thead>
														  <tbody id="id-table-nm3000">
														  </tbody>
													  </table>
												  </div>
											  </section>
										  </div>
									  </div>
									
								  </div>
                                  
								  <div id="tab3" class="tab-pane">
									  <div class="row">
										  <div class="col-lg-12">
											  <section class="panel">
												  <header class="panel-heading">
													  
														<span class="pull-right">
														  <button type="button" id="loading-btn" class="btn  btn-xs"><i class="fa fa-filter"></i> 过滤条件1</button>
														  <button type="button" id="loading-btn" class="btn  btn-xs"><i class="fa fa-filter"></i> 排序条件1</button>
														  <!-- <a href="#" class=" btn btn-primary btn-xs"> 创建提醒</a> -->
														  <!-- <button type="button" id="loading-btn" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> 创建提醒</button> -->
													  </span>
												  </header>
												  
												  <div class="panel-body">
													  <div class="row">

														  <div class="col-lg-6 col-md-12">
															  <div class="input-group"><input type="text" placeholder="Search Here" class="input-sm form-control"> <span class="input-group-btn">
															  <button type="button" class="btn btn-sm btn-info"> 搜索!</button> </span></div>
														  </div>
													  </div>
												  </div>
												  
												  <div class="mybar">
													  <table  class="table  table-advance table-hover">
														  <thead>
														  <tr>
															  <th><span> 栏舍</span></th>
															  <th><span> 设备</span></th>
															  <th><span> 日数</span></th>
															  <th><span> 阶段</span></th>
															  <th><span> 模式</span></th>
															  <th><span> 今天可吃</span></th>
															  <th><span> 今天已吃</span></th>
															  <th><span> 下次喂料开始</span></th>
															  <th><span> 下次喂料结束</span></th>
															  <th><span></span></th>
														  </tr>
														  </thead>
														  <tbody id="id-table-bw800">
														  </tbody>
													  </table>
												  </div>
											  </section>
										  </div>
									  </div>
								  </div>
							  </div>
						  </div>
					  </section>
				  </div>
			  </div>



    <!-- js placed at the end of the document so the pages load faster -->
    <script src="__PUBLIC__/js/jquery.js"></script>
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="__PUBLIC__/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="__PUBLIC__/js/jquery.scrollTo.min.js"></script>
    <script src="__PUBLIC__/js/jquery.nicescroll.js" type="text/javascript"></script>
	<!-- SlimScroll -->
	<script src="__PUBLIC__/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="__PUBLIC__/js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="__PUBLIC__/js/owl.carousel.js" ></script>
    <script src="__PUBLIC__/js/jquery.customSelect.min.js" ></script>
	<script src="__PUBLIC__/assets/morris.js-0.4.3/morris.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets/morris.js-0.4.3/raphael-min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/respond.min.js" ></script>
	<script src="__PUBLIC__/assets/jquery-knob/js/jquery.knob.js"></script>

    <!--right slidebar-->
    <script src="__PUBLIC__/js/slidebars.min.js"></script>
	
	<!--Form Validation-->
    <script src="__PUBLIC__/js/bootstrap-validator.min.js" type="text/javascript"></script>

    <!--Form Wizard-->
    <script src="__PUBLIC__/js/jquery.steps.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/jquery.validate.min.js" type="text/javascript"></script>

    <!--common script for all pages-->
    <script src="__PUBLIC__/js/common-scripts.js"></script>


	<!--script for this page-->
    <script src="__PUBLIC__/js/jquery.stepy.js"></script>
	<!-- layer -->
	<script src="__PUBLIC__/plugins/layer-v3.0.1/layer/layer.js"></script>

	

<script>
var selectedrid=null;
var urlhouse='{:u('Index/house')}';
var url3000='{:u('Setting/nm3000')}';
var url800='{:u('Setting/bw800')}';
var url820='{:u('Setting/nm820')}';
var url410='{:u('Setting/nm410')}';
	  
function loadDevice(rid){
	selectedrid=rid;
	$('.list-group-item').each(function(){
		$(this).removeClass("active");
	});
	$('#id-house-'+rid).addClass("active");
	layer.load();
	loadnm820410(rid);
	loadbw800(rid);
	loadnm3000(rid);
}

function loadbw800(rid){
	
	$.ajax({
	  type: 'POST',
	  url: "{:u('Index/loadbw800')}",
	  data: {rid:rid},
	  success: function(data){
		var htmlstr='';
		if(data.length>0){
			for(var i=0;i<data.length;i++){
				htmlstr+="<tr>";
				htmlstr+="<td><a  href='"+urlhouse+"?rid="+data[i].houseid+"'>"+data[i].housename+"</a></td>";
				htmlstr+="<td><a  href='"+url800+"?rid="+data[i].rid+"'>"+data[i].lxname+"</a></td>";
				
				if(data[i].day){
					htmlstr+="<td><span class='label label-primary'>"+data[i].day +"</span></td>";
					if(data[i].stage==0){
						htmlstr+="<td><span class='label label-success'>断奶</span></td>";
					}else if(data[i].stage==1){
						htmlstr+="<td><span class='label label-warning'>产前</span></td>";
					}else if(data[i].stage==2){
						htmlstr+="<td><span class='label label-warning'>哺乳</span></td>";
					}
					htmlstr+="<td>"+data[i].stage +"</td>";
					htmlstr+="<td>"+data[i].mode +"</td>";
					htmlstr+="<td>"+data[i].total +"</td>";
					htmlstr+="<td>"+data[i].haseat +"</td>";
					htmlstr+="<td>"+data[i].time_next_start +"</td>";
					htmlstr+="<td>"+data[i].time_next_end +"</td>";
					htmlstr+="<td></tr>";
				}else{
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td></tr>";
				}
			}
		}
		$('#id-table-bw800').html(htmlstr);
		
	  },
	  error: function (data) {
		alert(data);
	  },
	  complete: function (XHR, TS) {
		layer.closeAll('loading');
	  },
	  dataType: "json"
	});
}

function loadnm3000(rid){

	$.ajax({
	  type: 'POST',
	  url: "{:u('Index/loadnm3000')}",
	  data: {rid:rid},
	  success: function(data){
		var htmlstr='';
		if(data.length>0){
			for(var i=0;i<data.length;i++){
				htmlstr+="<tr>";
				htmlstr+="<td><a  href='"+urlhouse+"?rid="+data[i].houseid+"'>"+data[i].housename+"</a></td>";
				htmlstr+="<td><a  href='"+url3000+"?rid="+data[i].rid+"'>"+data[i].lxname+"</a></td>";
				if(data[i].slrun==1){
					htmlstr+="<td><span class='label label-success'>打开</span></td>";
				}else if(data[i].slrun==0){
					htmlstr+="<td><span class='label label-warning'>关闭</span></td>";
				}else{
					htmlstr+="<td>离线</td>";
				}
				
				if(data[i].slmode==1){
					htmlstr+="<td><span class='label label-info'>自动</span></td>";
				}else if(data[i].slmode==0){
					htmlstr+="<td><span class='label label-info'>手动</span></td>";
				}else{
					htmlstr+="<td>离线</td>";
				}
				
				if(data[i].slnextstart){
					htmlstr+="<td>"+data[i].slnextstart +"</td>";
				}
				
				if(data[i].xlrun==1){
					htmlstr+="<td><span class='label label-success'>打开</span></td>";
				}else if(data[i].xlrun==0){
					htmlstr+="<td><span class='label label-warning'>关闭</span></td>";
				}else if(data[i].xlrun==2){
					htmlstr+="<td><span class='label label-danger'>停止</span></td>";
				}else{
					htmlstr+="<td>离线</td>";
				}
				
				if(data[i].xlmode==1){
					htmlstr+="<td><span class='label label-info'>自动</span></td>";
				}else if(data[i].xlmode==0){
					htmlstr+="<td><span class='label label-info'>手动</span></td>";
				}else{
					htmlstr+="<td>离线</td>";
				}

				if(data[i].xlnextstart){
					htmlstr+="<td>"+data[i].xlnextstart +"</td>";
				}
				
				htmlstr+="<td></tr>";
			}
		}
		$('#id-table-nm3000').html(htmlstr);
		
	  },
	  error: function (data) {
		alert(data);
	  },
	  complete: function (XHR, TS) {
		layer.closeAll('loading');
	  },
	  dataType: "json"
	});
}

function loadnm820410(rid){

	$.ajax({
	  type: 'POST',
	  url: "{:u('Index/loadnm820410')}",
	  data: {rid:rid},
	  success: function(data){
		var htmlstr='';
		var list410=data.list410;
		var list820=data.list820;
		console.info(list820.length);
		console.info(list410.length);
		if(list820.length>0){
			for(var i=0;i<list820.length;i++){
				htmlstr+="<tr>";
				htmlstr+="<td><a  href='"+urlhouse+"?rid="+list820[i].houseid+"'>"+list820[i].housename+"</a></td>";
				htmlstr+="<td><a  href='"+url820+"?rid="+list820[i].rid+"'>"+list820[i].name+"</a></td>";
				
				if(list820[i].temp_r){
					console.info(list820[i].temp_r);
					console.info(i);
					if(isNaN(list820[i].temp_avg)){
						htmlstr+="<td>"+list820[i].temp_avg +"</td>";
					}else{
						htmlstr+="<td><span class='label label-primary'>"+list820[i].temp_avg+"</span></td>";
					}
					
					htmlstr+="<td><span class='label label-primary'>"+list820[i].humi_r.split(',')[0] +"</span></td>";
					htmlstr+="<td><span class='label label-primary'>"+list820[i].light_r +"</span></td>";
					htmlstr+="<td><span class='label label-primary'>"+list820[i].nh3_r +"</span></td>";
					htmlstr+="<td class='p-progress'><div class='progress progress-xs'><div style='width: "+list820[i].pc_wind +"%;' class='progress-bar progress-bar-success'></div></div><small>"+list820[i].pc_wind +"%</small></td>";
					var relaystate=list820[i].relaystate;
					var relaystate_bin=parseInt(relaystate).toString(2);
					//relaystate_bin=relaystate_bin.split("").reverse().join("");
					relaystate_bin=prefixInteger(relaystate_bin,17).toString();
					relaystate_bin=relaystate_bin.split("").reverse().join("");
					
					console.info(relaystate_bin);
					htmlstr+="<td>";
					for(var x=1;x<17;x++){
						if(relaystate_bin[x]=='0'){
							htmlstr+="<i class='fa fa-2x fa-asterisk'></i>";
						}else{
							htmlstr+="<i class='fa fa-2x fa-asterisk text-success'></i>";
						}
					}
					htmlstr+="</td>";
					htmlstr+="</tr>";
				}else{
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td></tr>";
				}
			}
		}
		if(list410.length>0){
			for(var i=0;i<list410.length;i++){
				htmlstr+="<tr>";
				htmlstr+="<td><a  href='"+urlhouse+"?rid="+list410[i].houseid+"'>"+list410[i].housename+"</a></td>";
				htmlstr+="<td><a  href='"+url820+"?rid="+list410[i].rid+"'>"+list410[i].name+"</a></td>";
				if(list410[i].temp_r){
					if(isNaN(list410[i].temp_avg)){
						htmlstr+="<td>"+list410[i].temp_avg +"</td>";
					}else{
						htmlstr+="<td><span class='label label-primary'>"+list410[i].temp_avg+"</span></td>";
					}
					
					htmlstr+="<td><span class='label label-primary'>"+list410[i].humi_r +"</span></td>";
					htmlstr+="<td></td>";
					htmlstr+="<td></td>";
					htmlstr+="<td class='p-progress'><div class='progress progress-xs'><div style='width: "+list410[i].pc_wind +"%;' class='progress-bar progress-bar-success'></div></div><small>"+list410[i].pc_wind +"%</small></td>";
					var relaystate=list410[i].relaystate;
					var relaystate_bin=parseInt(relaystate).toString(2);
					relaystate_bin=prefixInteger(relaystate_bin,9).toString();
					relaystate_bin=relaystate_bin.split("").reverse().join("");
					
					//console.info(relaystate_bin);
					htmlstr+="<td>";
					for(var x=1;x<9;x++){
						if(relaystate_bin[x]=='0'){
							htmlstr+="<i class='fa fa-2x fa-asterisk'></i>";
						}else{
							htmlstr+="<i class='fa fa-2x fa-asterisk text-success'></i>";
						}
					}
					htmlstr+="</td>";
					htmlstr+="</tr>";
				}else{
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td>离线</td>";
					htmlstr+="<td></tr>";
				}
			}
		}
		
		//console.info(htmlstr);
		$('#id-table-nm820').html(htmlstr);
		//$(".knob").knob({'readOnly':true,"fgColor":"#4CC5CD","skin":"tron" });
	  },
	  error: function (data) {
		//alert(data);
	  },
	  complete: function (XHR, TS) {
		layer.closeAll('loading');
	  },
	  dataType: "json"
	});
}

function initScroll(){
	var h=$(window).height();
	//出现滚动条
	$(".mybar").slimScroll({
		height:(h-140),
		size: '10px', //组件宽度
		color: '#000', //滚动条颜色
		position: 'right', //组件位置：left/right
		distance: '0px', //组件与侧边之间的距离
		start: 'top', //默认滚动位置：top/bottom
		opacity: .9, //滚动条透明度
		alwaysVisible: false, //是否 始终显示组件
		disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
		railVisible: true, //是否 显示轨道
		railColor: '#333', //轨道颜色
		railOpacity: .2, //轨道透明度
		railDraggable: true, //是否 滚动条可拖动
		railClass: 'slimScrollRail', //轨道div类名 
		barClass: 'slimScrollBar', //滚动条div类名
		wrapperClass: 'slimScrollDiv', //外包div类名
		allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
		wheelStep: 20, //滚轮滚动量
		touchScrollStep: 200, //滚动量当用户使用手势
		borderRadius: '7px', //滚动条圆角
		railBorderRadius: '7px' //轨道圆角
	});
}
$(window).resize(function(){
	initScroll();
});
	  
$(document).ready(function() {
	
	loadDevice('');//加载全部
	initScroll();
	//启动定时加载
	setInterval(function () {
		loadnm820410(selectedrid);
		loadbw800(selectedrid);
		loadnm3000(selectedrid);
	},1000*{$intval});
});

function prefixInteger(num, n) {
	return (Array(n).join(0) + num).slice(-n);
}
$(function(){

});

</script>

  </body>
</html>
